@charset "utf-8";
/* CSS Document */
html {
  scroll-behavior: smooth;
}
.artlogoimg{
    height: 100vh;
}
.art-logo {
    width: 100vw;
    margin-left: -3vw;
    margin-top: -20px;
}
.art-logo-a {
    animation: fadein 10s linear forwards;
}
@keyframes fadein {
    0% {opacity: 0}
    70% {opacity: 0}
    100% {opacity: 1}
  }
.art-logo-c {
    animation: role-to-left 7s linear forwards;
}
@keyframes role-to-left {
	0% {
		transform: translateX(100vw) rotate(0);
	}
	100% {
		transform: translateX(0) rotate(720deg);
	}
}
@media (768px <= width) {
    .art-logo {
        height: 100vh;
        width: auto;
        margin-left: -20px;
        margin-top: -3vh;
    }
}

.art-content {
    position: static;
    background-color:rgba(35,59,108,1);
    padding-bottom: 5rem;
}
.art-content h3 {
    color: white;
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 0;
    padding: 1rem 1rem 0 1rem;
}
.art-content h5 {
    color: white;
    margin-bottom: 0;
    padding: 0 1rem 1rem 1rem;
    font-size: 1.1rem;
}
.art-content hr {
    opacity: 1;
    margin: 0;
    height: 5px;
    animation: line-to-right 3s linear forwards;
    height: 5px;
    border: none;
}
.art-content span {
    display: block;
    text-align: center;
}
@keyframes line-to-right {
	0%{
		width: 0%;
	}
	100%{
		width: 80%;
	}
}
.art-content a {
    text-decoration: none;
    display: block;
}
.art-1 a:hover {
    background-color: rgba(220, 20, 60, 0.3);
}
.art-2 a:hover {
    background-color: rgba(34, 139, 34, 0.3);
}
.art-3 a:hover {
    background-color: rgba(255, 68, 0, 0.3);
}
.art-3 span {
    margin-top: -1rem;
    padding-bottom: 1rem;
}
.art-4 a:hover {
    background-color: rgba(30, 143, 255, 0.3);
}
.art-4 span {
    margin-top: -1rem;
    padding-bottom: 1rem;
}
.art-5 a:hover {
    background-color: rgba(255, 217, 0, 0.3);
}
.art-5 span {
    margin-top: -1rem;
    padding-bottom: 1rem;
}