Фикс шрифтов

style.css

@@ -1,360 +1,360 @@
-@font-face {
-    font-family: "Anime Ace";
-    src: url("../fonts/Anime Ace.ttf");
-  }
-html{
-    scroll-behavior: smooth;
-}
-*{
-    font-family: "Anime Ace";
-}
-  
-body{
-    margin: 0;
-    height: 9400px;
-    background: linear-gradient(to top, black 30%, rgba(32, 116, 182, 1) 60%);
-    color: white;
-}
-
-.container{
-    margin: 0 auto;
-    width: 1920px;
-}
-
-.line{
-    margin-top: 100px;
-    display: flex;
-    justify-content: center;
-}
-
-/* START HEADER*/
-.header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 50px;
-}
-
-.header-nav-list {
-    display: flex;
-    column-gap: 40px;
-}
-.header-nav-item {
-    list-style: none;
-    font-size: 36px;
-}
-.header-nav-item a:hover {
-    color: #F4A434;
-    transition: 0.3s;
-}
-.header-nav-item a{
-    text-decoration: none;
-    color: white;
-    font-family: "Anime Ace";
-}
-.header-profile {
-    display: flex;
-    align-items: center;
-    column-gap: 10px;
-}
-.header-profile a{
-    text-decoration: none;
-    color: #F4A434;
-    font-size: 36px;
-}
-/* END HEADER*/
-
-/* START MAIN*/
-.main{
-    margin-top: 100px  ;
-    background-image: url(image/main-gerl.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 1200px;
-    width: 1960px;
-}
-.main-text{
-    float: right;
-    margin-top: 250px;
-    margin-right: 150px;
-    font-size: 45px;
-}
-/* END HEADER*/
-
-/* START ABOUT-ME*/
-.about-me h1{
-    font-size: 55px;
-}
-.about-me-subtext {
-    display: flex;
-    align-items: center;
-    column-gap: 30px;
-    margin-top: 60px;
-}
-.about-me-subtext p{
-    font-size: 40px;
-}
-/* END ABOU-ME*/
-
-/* START RATIMG*/
-.rating {
-    margin-top: 100px;
-}
-.rating h1{
-    font-size: 55px;
-}
-.rating-card-block {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 100px;
-}
-.rating-card-title {
-    font-size: 24px;
-}
-.rating-card-subtext {
-    margin-top: 0px;
-    font-size: 22px;
-    color: #899299;
-}
-/* END RATING*/
-
-/* START FRIEND*/
-.friend {
-    margin-top: 100px;
-}
-.friend h1{
-    font-size: 55px;
-}
-.friend-card-block {
-    display: flex;
-    justify-content: space-between;
-}
-.friend-card-one-piece {
-    background-image: url(image/one-pice-gerl.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 1195px;
-    width: 500px;
-}
-.friend-card-hanter{
-    background-image: url(image/hanter-x-man.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 1195px;
-    width: 500px;
-}
-.friend-card-fairy{
-    background-image: url(image/fairy-taill-man.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 1195px;
-    width: 500px;
-}
-.friend-card-title {
-    font-size: 30px;
-    margin-top: 800px;
-    margin-left: 30px;
-}
-.friend-card-subtext {
-    font-size: 30px;
-    margin-left: 30px;
-    color: #899299;
-}
-/* END FRIEND*/
-
-/* START MERCH*/
-.merch {
-    margin-top: 100px;
-}
-.merch h1{
-    font-size: 55px;
-}
-.card-block {
-    display: flex;
-    justify-content: space-between;
-}
-.card {
-    margin-top: 90px;
-    background-image: url(image/square.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-    height: 880px;
-    width: 450px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.card img{
-    margin-top: 30px;
-}
-
-.card-text{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.card-text img{
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.card-text span{
-    margin: 0px;
-    font-size: 18px;
-    font-family: none;
-    color: #F4A434;
-}
-.card-text p{
-    margin: 0px;
-    font-size: 20px;
-    font-family: none;
-}
-
-.card-p-color{
-    font-size: 13px;
-}
-
-.card button{
-    margin-top: 20px;
-    color: white;
-    background-color: #F4A434;
-    padding: 20px 20px;
-    border-radius: 30px;
-    border: solid 0px;
-    transition: all 0.3s;
-    cursor: pointer;
-}
-
-.card button:hover{
-    background-color: #8a632c;
-}
-/* END MERCH*/
-
-/* STRAT contacts-and-servis*/
-    .contacts-and-servis{
-        display: flex;
-        justify-content: space-between;
-        margin-top: 100px;
-    }
-    .contacts h1{
-        font-size: 55px;
-        color: #F4A434;
-    }
-    .contacts p{
-        font-size: 40px;
-    }
-    .contacts-info{
-        margin-top: 70px;
-    }
-    .info{
-        display: flex;
-        align-items: center;
-        gap: 50px;
-    }
-    .info img{
-        width: 80px;
-        height: 80px;
-    }
-    .servis{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-    .servis h1{
-        margin-left: -580px;
-        font-size: 55px;
-        color: #F4A434;
-    }
-    .servis-form{
-        width: 750px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-    }
-    .servis-input{
-        color: white;
-        border: 1px solid white;
-        background: transparent;
-        font-family: none;
-        font-size: 30px;
-        margin-top: 40px;
-        width: 300px;
-        height: 10px;
-        padding: 30px;
-    }
-    .servis-input-big{
-        color: white;
-        border: 1px solid white;
-        background: transparent;
-        font-family: none;
-        font-size: 30px;
-        margin-top: 40px;
-        width: 750px;
-        padding: 30px 30px 150px 30px;
-    }
-    .servis button{
-        font-size: 30px;
-        color: white;
-        border: 1px solid white;
-        background: transparent;
-        padding: 20px 20px;
-        margin-top: 40px;
-        width: 400px;
-        transition: all 0.3s;
-        cursor: pointer;
-    }
-    .servis button:hover{
-        background-color: #F4A434;
-    }
-/* END contacts-and-servis*/
-
-/* START FOOTER*/
-    .footer-bg{
-        background: linear-gradient(black 20%, rgba(32, 116, 182, 1) );
-        height: 600px;
-    }
-    .footer{
-        padding-top: 300px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-    }
-    .footer-navigation{
-        display: flex;
-        gap: 50px;
-    }
-    .footer-nav-list{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-    .footer-nav-item{
-        list-style: none;
-    }
-    .footer-nav-item a{
-        text-decoration: none;
-        color: #F4A434;
-        font-size: 50px;
-    }
-    .footer-nav-item a:hover {
-        color: white;
-        transition: 0.3s;
-    }
-    .social{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-    }
-    .social h1{
-        font-size: 55px;
-        color: #F4A434;
-    }
-    .social-image{
-        display: flex;
-        gap: 60px;
-    }
+@font-face {
+    font-family: "Anime Ace";
+    src: url("./fonts/Anime Ace.ttf");
+  }
+html{
+    scroll-behavior: smooth;
+}
+*{
+    font-family: "Anime Ace";
+}
+  
+body{
+    margin: 0;
+    height: 9400px;
+    background: linear-gradient(to top, black 30%, rgba(32, 116, 182, 1) 60%);
+    color: white;
+}
+
+.container{
+    margin: 0 auto;
+    width: 1920px;
+}
+
+.line{
+    margin-top: 100px;
+    display: flex;
+    justify-content: center;
+}
+
+/* START HEADER*/
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 50px;
+}
+
+.header-nav-list {
+    display: flex;
+    column-gap: 40px;
+}
+.header-nav-item {
+    list-style: none;
+    font-size: 36px;
+}
+.header-nav-item a:hover {
+    color: #F4A434;
+    transition: 0.3s;
+}
+.header-nav-item a{
+    text-decoration: none;
+    color: white;
+    font-family: "Anime Ace";
+}
+.header-profile {
+    display: flex;
+    align-items: center;
+    column-gap: 10px;
+}
+.header-profile a{
+    text-decoration: none;
+    color: #F4A434;
+    font-size: 36px;
+}
+/* END HEADER*/
+
+/* START MAIN*/
+.main{
+    margin-top: 100px  ;
+    background-image: url(image/main-gerl.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 1200px;
+    width: 1960px;
+}
+.main-text{
+    float: right;
+    margin-top: 250px;
+    margin-right: 150px;
+    font-size: 45px;
+}
+/* END HEADER*/
+
+/* START ABOUT-ME*/
+.about-me h1{
+    font-size: 55px;
+}
+.about-me-subtext {
+    display: flex;
+    align-items: center;
+    column-gap: 30px;
+    margin-top: 60px;
+}
+.about-me-subtext p{
+    font-size: 40px;
+}
+/* END ABOU-ME*/
+
+/* START RATIMG*/
+.rating {
+    margin-top: 100px;
+}
+.rating h1{
+    font-size: 55px;
+}
+.rating-card-block {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 100px;
+}
+.rating-card-title {
+    font-size: 24px;
+}
+.rating-card-subtext {
+    margin-top: 0px;
+    font-size: 22px;
+    color: #899299;
+}
+/* END RATING*/
+
+/* START FRIEND*/
+.friend {
+    margin-top: 100px;
+}
+.friend h1{
+    font-size: 55px;
+}
+.friend-card-block {
+    display: flex;
+    justify-content: space-between;
+}
+.friend-card-one-piece {
+    background-image: url(image/one-pice-gerl.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 1195px;
+    width: 500px;
+}
+.friend-card-hanter{
+    background-image: url(image/hanter-x-man.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 1195px;
+    width: 500px;
+}
+.friend-card-fairy{
+    background-image: url(image/fairy-taill-man.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 1195px;
+    width: 500px;
+}
+.friend-card-title {
+    font-size: 30px;
+    margin-top: 800px;
+    margin-left: 30px;
+}
+.friend-card-subtext {
+    font-size: 30px;
+    margin-left: 30px;
+    color: #899299;
+}
+/* END FRIEND*/
+
+/* START MERCH*/
+.merch {
+    margin-top: 100px;
+}
+.merch h1{
+    font-size: 55px;
+}
+.card-block {
+    display: flex;
+    justify-content: space-between;
+}
+.card {
+    margin-top: 90px;
+    background-image: url(image/square.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 880px;
+    width: 450px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.card img{
+    margin-top: 30px;
+}
+
+.card-text{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.card-text img{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.card-text span{
+    margin: 0px;
+    font-size: 18px;
+    font-family: none;
+    color: #F4A434;
+}
+.card-text p{
+    margin: 0px;
+    font-size: 20px;
+    font-family: none;
+}
+
+.card-p-color{
+    font-size: 13px;
+}
+
+.card button{
+    margin-top: 20px;
+    color: white;
+    background-color: #F4A434;
+    padding: 20px 20px;
+    border-radius: 30px;
+    border: solid 0px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+
+.card button:hover{
+    background-color: #8a632c;
+}
+/* END MERCH*/
+
+/* STRAT contacts-and-servis*/
+    .contacts-and-servis{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 100px;
+    }
+    .contacts h1{
+        font-size: 55px;
+        color: #F4A434;
+    }
+    .contacts p{
+        font-size: 40px;
+    }
+    .contacts-info{
+        margin-top: 70px;
+    }
+    .info{
+        display: flex;
+        align-items: center;
+        gap: 50px;
+    }
+    .info img{
+        width: 80px;
+        height: 80px;
+    }
+    .servis{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .servis h1{
+        margin-left: -580px;
+        font-size: 55px;
+        color: #F4A434;
+    }
+    .servis-form{
+        width: 750px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    .servis-input{
+        color: white;
+        border: 1px solid white;
+        background: transparent;
+        font-family: none;
+        font-size: 30px;
+        margin-top: 40px;
+        width: 300px;
+        height: 10px;
+        padding: 30px;
+    }
+    .servis-input-big{
+        color: white;
+        border: 1px solid white;
+        background: transparent;
+        font-family: none;
+        font-size: 30px;
+        margin-top: 40px;
+        width: 750px;
+        padding: 30px 30px 150px 30px;
+    }
+    .servis button{
+        font-size: 30px;
+        color: white;
+        border: 1px solid white;
+        background: transparent;
+        padding: 20px 20px;
+        margin-top: 40px;
+        width: 400px;
+        transition: all 0.3s;
+        cursor: pointer;
+    }
+    .servis button:hover{
+        background-color: #F4A434;
+    }
+/* END contacts-and-servis*/
+
+/* START FOOTER*/
+    .footer-bg{
+        background: linear-gradient(black 20%, rgba(32, 116, 182, 1) );
+        height: 600px;
+    }
+    .footer{
+        padding-top: 300px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .footer-navigation{
+        display: flex;
+        gap: 50px;
+    }
+    .footer-nav-list{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    .footer-nav-item{
+        list-style: none;
+    }
+    .footer-nav-item a{
+        text-decoration: none;
+        color: #F4A434;
+        font-size: 50px;
+    }
+    .footer-nav-item a:hover {
+        color: white;
+        transition: 0.3s;
+    }
+    .social{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    .social h1{
+        font-size: 55px;
+        color: #F4A434;
+    }
+    .social-image{
+        display: flex;
+        gap: 60px;
+    }
 /* END FOOTER*/