body {
    background-image: url('https://phishphin.neocities.org/mk2pdex/lake-maggiore-in-the-evening-1858.jpg');
    background-attachment: fixed;
    background-size: cover;
}

.mainbg {
    background-color: #211F2B;
    opacity: 80%;
    position: absolute;
    margin-top: -1%;
    margin-left: -1%;
    margin-bottom: 0%;
}

.main {
    position: absolute;
    margin-left: -1.5%;
    margin-top: 4%;
    padding: 0% 0.5%;
}

.main .mnav{ 
    background-color:#211F2B;
    margin-top: -1.5%;
    position: absolute;
    padding-left: 3%;
    padding-top: 1%;
    padding-right: 0%;
    display: flex;
    flex-direction: column;
}

.main .scroll {
    position:absolute;
    max-height: 120%;
    min-height: 120%;
    max-width: 77%;
    min-width: 77%;
    overflow: visible;
    margin-left: 22%;
    text-align: justify;
    display: flex;
    flex-direction: column;
}

.stamp {
    position: absolute;
    overflow: scroll;
    text-align: left;

  /* perforation size: */
  --radius: 7px;

  background-image: 
    radial-gradient(
      var(--radius),
      transparent 98%,
      bisque
    ),
    linear-gradient(bisque 0 0);
  background-repeat: 
    round, 
    no-repeat;
  background-position:
    calc(var(--radius) * -1.5) calc(var(--radius) * -1.5),
    50%;
  background-size:
    calc(var(--radius) * 3) calc(var(--radius) * 3),
    calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3);
}

.kin {
    padding: 5% 5% 5% 3%;
    min-width: 21%;
    max-width: 21%;
    min-height: 20%;
    max-height: 20%;
    overflow: visible;
         /* perforation size: */
      --radius: 7px;
    
      background-image: 
        radial-gradient(
          var(--radius),
          transparent 98%,
          bisque
        ),
        linear-gradient(bisque 0 0);
      background-repeat: 
        round, 
        no-repeat;
      background-position:
        calc(var(--radius) * -1.5) calc(var(--radius) * -1.5),
        50%;
      background-size:
        calc(var(--radius) * 3) calc(var(--radius) * 3),
        calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3); 
    }
    
    .kt {
        min-width: 24%;
        max-width: 24%;
        min-height: 32%;
        max-height: 32%;
        margin-top: -25%;
        margin-left: 0%;
        position:absolute;
        opacity: 0;
        transition: 0.3s;
        background-color: bisque;
    }
    .kt:hover {
        opacity: 1;
    }

.music {
    width: 50%;
    position: absolute;
    margin-left: -3%;
}

.album {
    max-width: 33%;
    min-width: 33%;
    overflow: visible;
}


.at {
    position: absolute;
    text-align: center;
    border-radius: 1%;
    margin-top: -33.5%;
    max-width: 32%;;
    min-width: 32%;
    min-height: 39%;
    max-height: 39%;
    padding-right: .5%;
    opacity: 0;
    transition: 0.3s;
    background-color: #171E30;
}

.at:hover {
    opacity: .9;
}

.spine {
    position: absolute;
}

.rv {
    position: absolute;
}

.head {
    max-width: 78%;
    min-width: 78%;
    max-height: 8%;
    min-height: 8%;
    border-radius: 1%;
    padding-left: 5%;
    padding-top: 2%;
    margin-left: -3%;
    margin-top: -2.5%;
    position: absolute;
    background-color: #211F2B;
    display: flex;
    flex-direction: row;
}

.head .links {
    display: flex;
    flex-direction: row;
    margin-left: 20%;
    max-width: 70%;
    min-width: 70%;
    position: absolute;
    overflow: scroll;
}

.foot {
    background-color: #211F2B;
    margin-left: 14%;
    margin-bottom: 0%;
    padding: 1%;
    text-align: center;
    position: absolute;
}

.octo {
    position:absolute;
    width:8%;
    margin-left: 12%;
    transform: rotate(170deg);
}

/* 171E30 oxford blue, 284660 indigo dye, A22818 rufous,
E17F36 caramel, FCE8C3 dutch white */

.mainbg h1 {
    color: #171E30;
}

.head h1 {
    font-family: Cormorant SC;
    color: #F2DDC1;
    font-size: 150%;
}

h3 {
    font-family: Cormorant SC;
    color: #3A425D;
    font-size: 125%;
}

h5 {
    font-family: Cormorant SC;
    color:#E17F36;
    font-size: 125%;
}

p {
    font-family: Cormorant Infant;
    color: #E4C49E;
    font-size: 125%;
}
.marg {
    margin-left: 35%;
}

p a {
    font-family: Cormorant SC;
    color: #A22818;
    font-size: 125%;
}

p a:hover {
    font-family: Cormorant SC;
    color: #E17F36;
    font-size: 125%;
}

.main .mnav h1 {
    font-family: Cormorant SC;
    color:#E4C49E;
    font-size: 150%;
}
.main .mnav p {
    font-family: Cormorant Infant;
    color:#E4C49E;
    font-size: 125%;
}

.main .mnav .button1 {
    font-family: Cormorant Infant;
    font-size: 105%;
    font-weight: bold;
    color:#211F2B;
    background-color: #D3AD54;
    max-width: 80%;
    min-width: 80%;
}
.main .mnav .button1:active {
    box-shadow: #F2DDC1 3px 3px;
    transform: translateY(3px);
}

.main .mnav .button2 {
    font-family: Cormorant Infant;
    font-size: 105%;
    font-weight: bold;
    color:#E4C49E;
    background-color: #A22818;
    max-width: 80%;
    min-width: 80%;
    margin-top: 5%;
}
.main .mnav .button2:active {
    box-shadow: #3A425D 3px 3px;
    transform: translateY(3px);
}

.main .mnav .button3 {
    font-family: Cormorant Infant;
    font-size: 105%;
    font-weight: bold;
    color:#A22818;
    background-color: #E4C49E;
    max-width: 80%;
    min-width: 80%;
    margin-top: 5%;
    margin-bottom: 5%;
}
.main .mnav .button3:active {
    box-shadow: #284660 3px 3px;
    transform: translateY(3px);
}

.main .scroll .span2 h1 {
    font-family: Cormorant SC;
    font-size: 150%;
    color: bisque;
}

.main .scroll .cont p {
    font-family: Cormorant Infant;
    font-size: 110%;
    color: bisque;
}

.main .scroll .cont p a {
    color:#A22818;
}
.main .scroll .cont p a:hover {
    color:#E17F36;
}

.span3 .stamp h4 {
    font-family: Cormorant SC;
    font-size: 100%;
    color:#211F2B;
}

.span3 .stamp p {
    font-family: Cormorant Infant;
    font-size: 100%;
    color:#211F2B;
}

.span3 .new a {
    font-family: Cormorant SC;
    font-size: 125%;
    font-weight: bolder;
    text-decoration: underline #3A3D76 double 1px;
    color: #3A3D76;
}

.span3 .new a:hover {
    color:#E4C49E;
    text-decoration: underline #E4C49E double 1px;
}

.span3 .new p {
    font-family: Cormorant Infant;
    font-size: 110%;
    color:#211F2B;
}

.act p a {
    font-family: Cormorant Infant;
    color:#E17F36;
    font-size: 105%;
}
.act p a:hover {
    color:#A22818;
}
td {
    color:#F2DDC1;
}
tr:nth-child(even) {
    background-color:#284660;
}
tr:nth-child(odd) {
    background-color: #171E30;
}
.bolded {
    font-weight: bold;
    font-family: Cormorant SC;
    color:#D3AD54;
    font-size: 120%;
    padding-left: 3%;
}
td .norm {
    font-family: Cormorant Infant;
    font-size: 140%;
}

li {
    color:#F2DDC1;
    font-family: Cormorant Infant;
    font-size: 115%;
    text-align: justify;
}

li a {
    color:#E17F36;
    font-weight: bold;
}

li a:hover {
    color:#D3AD54;
}

ul {
    list-style-image: url('https://phishphin.neocities.org/pixels/red.gif');
}

ol {
    list-style-image: url('https://phishphin.neocities.org/pixels/exclaimation.gif');
}

.holder {
    display: flex;
    flex-direction: row;
}

.kin .kt p {
    color:#171E30;
    font-size: 100%;
    text-align: center;
    margin-top: -22%;
}

.kin .kt h5 {
    font-size: 100%;
    color:#A22818;
    margin-top: -3%;
    text-align: center;
}

.aboutme p {
    color:#F2DDC1;
    text-align: justify;
    font-size: 115%;
}

.music h1 {
    font-family: Cormorant SC;
    color:#A22818;
    font-size: 175%;
    text-align: center;
    text-decoration: underline;
}
.at a {
    font-family: Cormorant SC;
    color:#D3AD54;
    font-weight: bolder;
    font-size: 100%;
    margin-top: 5%;
}

.at a:hover {
    color:#E17F36;
}

.at p {
    font-size: 100%;
    margin-top: -1%;
    font-family: Cormorant Infant;
}

.at ol {
    list-style-image: url('https://phishphin.neocities.org/pixels/cdspin.gif');
    line-height: 110%;
}
.at li {
    font-size: 100%;
    margin-top: -5%;
    text-align: left;

}