y2k.website/webpage/style.css

* {
	box-sizing: border-box;
}
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 14px;
 background-color: black;
 padding: 0.5%;
 margin-left: 20%;
 margin-right: 20%;
}
html * {
 color: white;
}
@font-face {
 font-family: 'Draco';
 src: url('https://y2kcs.neocities.org/Draco/Draco.otf');
 format("opentype");
}
a {
 display: block;
 padding: 0;
 text-decoration: none;
 width: 100%;
 }
#adless {
 color: grey;
 display: inline;
 padding: 0;
 margin-left: 0;
 text-decoration: underline;
}
#aimage {
 display: inline;
 padding: 0;
}
ol {
 padding-left: 12px;
}
li {
 word-wrap: break-word;
 width: 97%;
}
hr {
 margin-right: 16px;
 color: grey;
}
.clickable-image {
 width: 80%;
 height: auto;
 object-fit: cover;
 border: 1px solid #fff;
}
.clickable-image:active {
 width:100%;
 height:auto;
}
a:hover {
 color: #999999;
}
p {
 word-wrap: break-word;
 width: 97%;
}
#grad {
  background-image: linear-gradient(to right, black, transparent), url('webpagebackground.png');
 background-size: cover;
 padding: 12px;
 border: 1px solid #fff;
 max-width: 100%;
 } 
.container {
  display: flex;
  word-wrap: break-word;
}
.box {
 flex: 1;
 max-width: 18%;
 margin-top: 12px;
 padding-left: 12px;
 border: 1px solid #fff;
}
.boxmiddle {
 flex: 2;
 margin-top: 12px;
 margin-left: 12px;
 margin-right: 12px;
 padding-left: 12px;
 border: 1px solid #fff;
}
.boxmiddleright {
 flex: 2;
 margin-top: 12px;
 margin-left: 12px;
 padding-left: 12px;
 border: 1px solid #fff;
}
iframe {
 border: 1px solid #fff;
 height: 72vh;
 width: 82%;
 margin-top: 12px;
 margin-left: 12px;
}
#ifix {
 max-width: 100%;
 padding-bottom: 12px;
}
#smoltext {
 color: grey;
 font-size: 11px;
}
#textfix {
	word-wrap: break-word;
	width: 85%;
}
@media only screen and (max-width: 1440px) {
/*HD 4:3 PC resolutions*/
 body {
  margin-left: 10%;
  margin-right: 10%;
 }
}
@media only screen and (max-width: 1024px) {
/*smaller 4:3 PC resolutions*/
 body {
  margin-left: 0%;
  margin-right: 0%;
  padding-left: 12px;
  padding-right: 12px
 }
}
@media only screen and (max-width: 750px) {
/* mobile phones*/
 .box, .container {
  display: block;
  max-width: 100%;
  margin-top: 12px;
 }
 .boxmiddle, .boxmiddleright {
  display: block;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
 }
 iframe{ 
  margin-top: 12px;
  margin-left: 0;
  width:100%;
 }
 #ifix{
  width:100%;
 }
 .clickable-image {
  width: 90%;
  height: auto;
  object-fit: cover;
  border: 1px solid #fff;
 }
 .clickable-image:active {
  width:100%;
  height:auto;
 }
}