@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #6c6b6b;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none !important;
    border: none !important;
}

a{
	display: inline-block;
	position: relative;
	color: #555;
 	text-decoration: none;
}
a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	height: 3px;
	background: #555;
	transform: scale(0, 1);
	transition: 0.4s;
}
a:hover:before {
	transform: scale(1);
}

header, footer {
    width: 100vw;
    background-color: rgba(100, 100, 90, 0.7);
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-image:url("../img/IMG_7302.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
    background-size:100% 100%;
}

footer {
    position: absolute;
    bottom: 0;
}

.txt {
    color: white;
    font-family:'Amatic SC', cursive;
}

#header-text {
    font-size: 500%;
    padding: 5pt;
    color: white;
}

#footer-text {
    font-size: 100%;
    padding: 2pt;
}

.item {
    font-family:'Amatic SC', cursive;
    color: black;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0.5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#top-left-item {
    height: 60vh;
    font-size: 800%;
}

#top-right-item {
    height: 60vh;
    font-size: 500%;
}

#bottom-left-item {
    height: 10vh;
    font-size: 300%;
}

#bottom-right-item {
    height: 10vh;
    font-size: 300%;
}

#main-item {
    font-family:'Amatic SC', cursive;
    color: black;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0.5%;
    padding: 8%;
    justify-content: center;
    align-items: center;
    height: 78vh;
    width: 80vw;
    margin: 0 auto;
}

.access {
    margin-left: 4%;
    margin-right: 4%;
}

.SNS {
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:580px) {
    .item {
        width: 100%;
        font-family:'Amatic SC', cursive;
        color: black;
        background-color: rgba(255, 255, 255, 0.9);
        
        align-items: center;
    }
    #top-left-item {
        height: 20vh;
        font-size: 400%;
    }
    
    #top-right-item {
        height: 20vh;
        font-size: 400%;
    }
    
    #bottom-left-item {
        height: 20vh;
        font-size: 400%;
    }
    
    #bottom-right-item {
        height: 20vh;
        font-size: 400%;
    }

    #main-item {
        margin: 0 auto;
    }
  }

  @media screen and (max-width:600px) {
      iframe {
          width: 100%;
      }
  }