@font-face {
    font-family: 'PrintChar21'; /*a name to be used later*/
    src: url('PrintChar21.ttf'); /*URL to font*/
}

body {
    background-color: #1c60ff;
    overflow: hidden;
    height: 100vh;
    cursor: url(cursor/frame1.png), auto;
    -webkit-animation: cursor 1000ms infinite;
    animation: cursor 1000ms infinite;
}

    @-webkit-keyframes cursor {
    0% {cursor: url(cursor/frame1.png), auto;}
    20% {cursor: url(cursor/frame2.png), auto;}
    40% {cursor: url(cursor/frame3.png), auto;}
    60% {cursor: url(cursor/frame4.png), auto;}
    80% {cursor: url(cursor/frame5.png), auto;}
    100% {cursor: url(cursor/frame6.png), auto;}
  } 
  
  @keyframes cursor {
    0% {cursor: url(cursor/frame1.png), auto;}
    20% {cursor: url(cursor/frame2.png), auto;}
    40% {cursor: url(cursor/frame3.png), auto;}
    60% {cursor: url(cursor/frame4.png), auto;}
    80% {cursor: url(cursor/frame5.png), auto;}
    10% {cursor: url(cursor/frame6.png), auto;}
  }


.center {
    display:flex;
}

.container {
    float: left;
    margin-left: 62vh;
    width: 30%;
    height: 101vh;
    background: rgb(28,96,255);
    background: linear-gradient( rgba(28,96,255,1) 0%, rgba(0,18,54,1) 100%);
}

p {
    color: white;
    font-family: 'PrintChar21';
    font-size: 14px;
}

h1 {
    color: white;
    font-family: 'PrintChar21';
    text-align: center;
    text-shadow: 2px 2px 2px black;
}

h3 {
    color: white;
    font-family: 'PrintChar21';
    text-shadow: 2px 2px 2px black;
    margin: 0px;
}

.main {
    padding-left: 5%;
    padding-right: 5%;
}

.sidebar {
    float: right;
    width: 10%;
    height: 101vh;
    background: rgba(0,18,54,1) 100%;
}


.buttons {
    display:grid;
}

button {
    font-family: 'PrintChar21';
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.row {
    display:flex;
    margin-left: 25px;
}

.hm {
    display: grid;
}

.pfp {
    transition: transform .2s;
}

.pfp:hover {
    transform: scale(1.5);
}