* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; text-align: left; background-color: black; color: white; background-image: url(../images/ujbg.jpg); background-size: 80%; background-repeat: repeat-x }
#vgm h1 {line-height: 75%; font-family: Arial, Helvetica, sans-serif; font-size: 34px; font-weight: 800;  color: white; transform: scale(1, .64); font-stretch: wider; text-align: left; }
#logo img{display: block; position: relative; float: left; padding: 0; margin: 0; width: 18%; }
#imagem1 img{display: block; position: relative; float: left; padding: 0; margin: 10%; width: 80%; }
#banner img{display: block; position: absolute;  margin-left:35%; width:40%; background-color: white;}
#stripe {  display: block; position: absolute; float: left; padding: 2px; background-color: #444; width: 100%; height: 0.2vw }
#album {position: absolute; left: 70vw; top: 3vw; text-align: center; color: white; transform: rotate(15deg); }
#album a:link { font-size: 2vw; font-weight: 800; color: white; text-shadow: 0 0 5px #000; text-decoration: none;}
a:link {color: white;}
.show h1 {font-weight: bold; font-size: calc(8px + 1vw); text-align: left; letter-spacing: -1px; color: black;}
.show h2 {font-weight: bold; font-size: calc(8px + 1vw); text-align: left; letter-spacing: -1px; color: red;}
.show h3 {font-weight: bold; font-size: calc(8px + 1vw); text-align: center; letter-spacing: -1px; color: black;}
#social {margin: 10px auto; border-bottom: solid #888;text-align: center;}
#social img {margin: 0 40px 0 40px;}
#social .button {width: 150px; height: 32px; margin: 16px 0; border: 0; float: left; font-weight: bold; font-size: 1em; color: #eee; text-decoration: none; text-align: center; background-color: transparent;}
#social .button:hover {text-shadow: #fff 0 0 2px; color: white;}
#column1 {height: auto; margin-top: -80px; text-align: center;}
#column2 {height: auto; text-align: center;}
#last-one {width: 100%; height: 100px;}
.writing {border: 12%; padding:8%; background-color: #0F2975;  color: #FFFFFF; background-image: url(../images/ujgb.jpg); background-size: 100% 100%; }
.image {border: 15%;}
.video {width: 80%; height: auto;}
.amazonholder {float: right; width: 130px;}
.amazontlg {float: right; display: block; position: absolute; bottom: 0; right: 0;}
.video-responsive {overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0;}
.video-responsive iframe {left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
.videobox {height:auto;}
.arrow {border: solid white; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}
.right {transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.left {transform: rotate(135deg); -webkit-transform: rotate(135deg);}
.up {transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
.down {transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.topnav {overflow: hidden; background-color: #444;}
.topnav a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
.active {background-color: #0f1b85; color: white;}
.dropdown {float: left; overflow: hidden;}
.dropdown .dropbtn {font-size: 17px; border: none; outline: none; color: white; width: 210px; padding: 14px 0; background-color: #999; font-family: inherit; margin: 0;}
.dropdown-content {display: none; position: absolute; background-color: #0f1b85; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,.2); z-index: 1;}
.dropdown-content a {float: none; color: black; width: 210px; padding: 12px 20px; text-decoration: none; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: #888; color: #ddd;}
.topnav a:visited, .dropdown:visited .dropbtn {background-color: #888; color: #bbb;}
.dropdown-content a:hover {background-color: #ddd; color: black;}
.dropdown:hover .dropdown-content {display: block; color: black;}
.noshow {display: none;}
.get-here {float: left; margin: 5px; text-align: center;}
.getit a{background-color: #000; width:110px; border-radius: 2px; color: yellow; padding: 2px 2px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;  border: thick solid yellow; }
.getit h1{font-weight: bold; font-size: 22px; text-align: center; color: white; font-stretch: wider; }
.bandcamp-button, .amazon-button, .apple-button, .deezer-button, .twitter-button, .facebook-button, .ig-button, .contact-button, .spotify-button, .youtube-button, .tiktok-button {display: block; height: 50px; width: 50px; margin: 10px 6px 10px 6px; border-radius: 5px; background-size: cover;}
.bandcamp-button {background-image: url(../img/bandcamp-white.png);}
.bandcamp-button:hover {background-image: url(../img/bandcamp-grey.png);}
.amazon-button {background-image: url(../img/amazon-icon.png);}
.amazon-button:hover {background-image: url(../img/amazon-icon-grey.png);}
.apple-button {background-image: url(../img/apple-icon-grey.jpg);}
.apple-button:hover {background-image: url(../img/apple-icon-white.jpg);}
.deezer-button {background-image: url(../img/deezer-icon-white.jpg);}
.deezer-button:hover {background-image: url(../img/deezer-icon-grey.jpg);}
.twitter-button {background-image: url(../img/twitter-icon-white.jpg);}
.twitter-button:hover {background-image: url(../img/twitter-icon-grey.jpg);}
.facebook-button {background-image: url(../img/facebook-icon-white.jpg);}
.facebook-button:hover {background-image: url(../img/facebook-icon-grey.jpg);}
.spotify-button {background-image: url(../img/spotify-icon-white.jpg);}
.spotify-button:hover {background-image: url(../img/spotify-icon-grey.jpg);}
.youtube-button {background-image: url(../img/youtube-icon-white.jpg);}
.youtube-button:hover {background-image: url(../img/youtube-icon-grey.jpg);}
.tiktok-button {background-image: url(../img/tiktok-icon-white.jpg);}
.tiktok-button:hover {background-image: url(../img/tiktok-icon-grey.jpg);}
.ig-button {background-image: url(../img/ig-icon-white.jpg);}
.ig-button:hover {background-image: url(../img/ig-icon-grey.jpg);}
.contact-button {background-image: url(../img/contact-icon-white.jpg);}
.contact-open {height: 350px; width: 390px;}
.contact-closed {height: 0; width: 390px;}
.contact-button:hover {background-image: url(../img/contact-icon-grey.jpg);}
.transform {-webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; -ms-transition: all .8s ease; transition: all .8s ease;}
.clearfix::after {content: ''; clear: both; display: table;}
.clearfix {overflow: auto;}
#vgmalbum {display: block; position: relative; font-size: 1em; text-align: center; color: white; overflow:hidden;}
#vgmalbum img {width: 26vw; margin: 20px 0; border: solid medium white; box-shadow: 0 0 20px #ffd;}
#vgmalbum h1 {text-align: center; font-size: 1.8em; font-weight:800;}
#vgmalbum h2 {text-align: center; font-size: 1.2em; font-weight:400;}
#vgmalbum .get-here {font-size: 0.9em;}
#vgm-get-here {display: block; position: relative; color: white; background-color: #4B464C; text-align:center; width: calc(376px - 1vw); margin: 24px calc(50% - 186px); padding-left:20px; overflow:hidden;}
#mail {height: 140px; width: 80%;}

#merch {margin-left: calc(50% - 160px); width:320px; padding:20px; }
#merch h2 {text-align:center; font-size: 1.2em; }
#merch img{position: relative; height: 140px; width: auto}

footer {margin-top: 40px; padding: 40px; color: #bbb; border-top: solid thin #777; font-size: .8em;}
footer a:link, footer a:visited {color: #ddd;}