stylesheet.css

*{
    margin:0;
    padding:0;
}

body{
    font-family: "Avenir Next";
    margin:0;
}

.loading{
    background-color: black;
    height: 100vh;
    text-align: center;
}

.loading-text{
    color:rgb(112, 112, 112);
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 100px;
    padding-top: 250px;
    text-align: center;
    animation-name: frashing;
    animation-duration:1s;
    animation-iteration-count:5;
    animation-delay:0.5s;
}

@keyframes frashing{
    0%{
        opacity: 1;
    }
    20%{
        opacity: 0.6;
    }
    40%{
        opacity: 0.2;
    }
    50%{
        opacity: 0;
    }
    60%{
        opacity: 0.2;
    }
    80%{
        opacity: 0.6;
    }
    100%{
        opacity: 1;
    }
}

.loading-img{
    width: 100px;
    text-align:center; 
    vertical-align:middle;
    margin:auto;
}

.home{
    position: relative;
    background-image: url(image/PC-on-table1.jpg);
    background-size: cover;
    height: 100vh;
    display: none;
}

.home-text{
    position: absolute;
    color: rgb(10, 238, 200);
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
    font-family: 'Homemade Apple', cursive;
    font-size: 70px;
}

.bars-text{
    border: solid 2px #fff;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    padding: 20px 100px;
    background-color: rgba(102, 101, 101, 0.7);
    cursor: pointer;
    position: fixed;
    top: 320px;
    right: 10px;
    z-index: 5;
}

.menu-bars{
    text-align: right;
}

.menu{
    position: fixed;
    top:0;
    right:-23%;
    background-color: #000;
    height: 100vh;
    width: 23%;
    margin-left: auto;
    z-index: 10;
}

.menu-back{
    padding: 10px;
}

.back{
    width:30px;
}

.fa-angle-double-right{
    color: rgb(255, 255, 255);
}

.menu-contents{
    color: #fff;
    font-size: 2em;
    font-family: 'Quicksand', sans-serif;
    padding-top: 35%;
}

.menu-list{
    margin-bottom: 5%;
    text-align: center;
    list-style: none;
}

.menu-text{
    text-decoration: none;
    color: #fff;
}

.menu-text:hover{
    color: rgb(117, 116, 116);
}

.menu-icons{
    text-align: center;
}

.icons-list{
    width:20px;
    height: 20px;
}

.fab{
    color: #fff;
    font-size: 2em;
    margin:0 7%;
    cursor: pointer;
    padding-top: 15%;
    display: block;
}

.twitter:hover{
    color: #00acee;
}

.github:hover{
    color: #00ff6a;
}

.fas{
    color: #fff;
    font-size: 2em;
    cursor: pointer;
}

@keyframes liking {
    0% {
      transform: scale(0.5);
    }
    10% {
      transform: scale(0.7);
    }
    30% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1.2);
    }
    80% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1.0);
    }
  }

.like{
    color: rgb(255, 0, 170);
    animation: liking .2s;
}

.like-contents{
    display: none;
}

.like-text{
    color: rgb(255, 251, 0);
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
    text-align: center;
    padding-top: 1%;
}

.menu-h2{
    font-family: 'Homemade Apple', cursive;
    color: #fff;
}