sunday morning | backstory

<!---creds to audreyscodes for the font used in the title; go check her out!!-->
<!--- and creds to tessismess for the inspired relations and aesthetic pages (the shit centers now, but i'll always wonder about the magic div needed) -->
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb {background: #000!important}

@font-face{font-family:Tiffany;src:url(https://dl.dropbox.com/s/z5ae8b6dzysia09/TiffanyScript.otf);}

@keyframes fadeInUp {
  0% {transform: translate3d(0, 100%, 0);}
100% {transform: none;}
}

::-webkit-scrollbar {width: 5px; background: none; padding: 0px}
::-webkit-scrollbar-thumb {background: rgba(100,100,100,0.5);}

.body{
    margin: auto;
    border: 3px solid #000;
    background: #000;
    width: 800px;
    height: 600px;
    overflow: hidden;
    font-family: 'Source Serif Pro'
}
.menu{
    width: 200px;
    height: 600px;
    float: right;
    box-sizing: border-box;
    background: #646464;
    border-left: 2px solid #000;
}
.menuimg{
    height: 148px;
    width: 200px;
    background: url(https://i.pinimg.com/originals/bd/ea/34/bdea3423d003d4e77a1f12172c404761.gif)center;
    background-size: cover;
    border-bottom: 2px solid #000
}
.text{
    background:#bbb;
    padding: 20px;
    font-size: 14px;
    height: 430px;
    text-align: justify;
    animation: fadeInUp 1.2s ease-in-out;
    animation-fill-mode: both;
    overflow: auto;
}
.title{
    background: url(https://i.pinimg.com/564x/a4/22/ac/a422acc64e3538259e46e3091a398079.jpg)center;
    background-size:cover;
    padding: 10px;
    height: 150px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 2px solid #000
}
.header{
    font-size: 20px;
    color: #b00b1e;
    font-family: 'Tiffany';
    text-align: center;
    font-weight: bold;
}
.header1{
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 2px #000
}
.header2{
    font-family: 'Source Serif Pro';
    font-size: 20px;
    color:#000;
    margin-top: -20px;
    position: relative;
    z-index:0;
    text-shadow: 1px 1px 3px #000
}
.tablinks:hover, .active {
    text-shadow:1px 1px 2px #000!important;
    font-size: 19px!important;
    box-shadow: inset 202px 202px 0px 0px #b00b1e!important;
    color: #fff!important;
}
.tablinks{
    border: none;
    font-size:18px;
    box-shadow: inset 0px 0px 0px 0.069px #b00b1e;
    transition: all 1.2s;
    font-family: 'tiffany';
    text-shadow:1px 1px 2px rgba(250,250,250,0.9);
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: #242424;
    padding: 10px;
    width: 180px;
    position:relative;
    z-index:2;
    height: 57.5px;
    font-weight: bold;
    margin: 15px 10px;
    overflow:hidden
}
h2, b, i{
    color: #b00b1e;
    text-shadow:1px 1px 2px #000;
}
h2{
    margin-top: 0px;
    margin-bottom: 5px;
    border-bottom: 4px solid rgba(100,100,100,0.5);
    border-top: 4px solid rgba(100,100,100,0.5);
    padding-bottom: 5px;
    text-align: center;
    font-size: 25px
}
.huh{
    background: url(https://64.media.tumblr.com/8e9a4fc707aff2c526a5970ca3cfb2fc/tumblr_plk52dLgF61rb4ia6_1280.jpg)center!important;
    background-size: cover;
}
.cred{
    background:#000;
    padding: 10px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-family: 'Source Serif Pro';
    width: 807px;
    box-sizing: border-box;
    margin: auto
}
fieldset{
    border: 2px solid #000;
}
legend{
    color: #b00b1e;
    text-shadow:1px 1px 2px #000;
    background: #bbb;
    font-weight: bold
}
</style>
<div class="body">
<div class="menu">
<div class="menuimg"></div>
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen" style="background: url(https://data.whicdn.com/images/347277045/original.jpg)center;background-size:cover;">past</button>
<button class="tablinks"onclick="openCity(event, '2')" style="background: url(http://pm1.narvii.com/6480/9eb73617d6e844ce11a4765f0d7336004ef90e6b_00.jpg)center;background-size:cover;">year 1-4</button>
<button class="tablinks" onclick="openCity(event, '3')" style="background: url(https://p.favim.com/orig/2018/09/15/red-grunge-red-aesthetic-rose-Favim.com-6310308.jpg)center;background-size:cover;">year 5-7</button>
<button class="tablinks" onclick="openCity(event, '4')" style="background: url(https://64.media.tumblr.com/f024c89bef51e2839119fb80c60e742c/tumblr_pll1ndOhTK1ukk143_400.jpg)center;background-size:cover;">graduated</button>
<button class="tablinks" onclick="openCity(event, '5')" style="background: url(https://64.media.tumblr.com/217dfeed96d320318768fce3a82f090d/0851d32d44388e06-0d/s1280x1920/5bc6cc60723e534643cfb104e3dfc13084d6e23d.jpg)center;background-size:cover;">now</button>
<button class="tablinks" onclick="openCity(event, '6')" style="background: url(https://64.media.tumblr.com/217dfeed96d320318768fce3a82f090d/0851d32d44388e06-0d/s1280x1920/5bc6cc60723e534643cfb104e3dfc13084d6e23d.jpg)center;background-size:cover;">topics</button>
</div>
<div class="title">
<div class="header"><div class="header1">It’s Saturday Night</div>
<div class="header2">Do you think I’ll get invited tonight?</div></div>
</div>
<div class="huh">
<div class="tabcontent" id="1">
<div class="text">
<h2>past</h2>
<p>Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

<p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>
<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.
<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>

<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.

<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
</div>
</div>
<div class="tabcontent" id="2">
<div class="text">
<h2>year 1-4</h2>
<p>Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

<p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>
<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.
<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>

<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.

<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
</div>
</div>
<div class="tabcontent" id="3">
<div class="text">
<h2>year 5-7</h2>
<p>Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

<p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>
<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.
<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. laoreet at, nobis euismod instructior  eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>

<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.

<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
</div>
</div>
<div class="tabcontent" id="4">
<div class="text">
<h2>graduate life</h2>
<p>Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

<p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>
<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.
<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>

<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.

<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
</div>
</div>
<div class="tabcontent" id="5">
<div class="text">
<h2>now</h2>
<p>Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

<p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>
<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.
<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>

<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.

<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes.  labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
</div>
</div>
<div class="tabcontent" id="6">
<div class="text">
<h2>topics</h2>
<fieldset><legend>Topic 1</legend>
 Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

        <p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber
</fieldset>
<fieldset><legend>Topic 2</legend>
    Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

           <p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber
   </fieldset>
</div>
</div></div></div>
<div class="cred">OOC Name / Timezone / Contact Method / Age / <a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff;" target="_blank"> Coded by Finch</a></div>
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

   window.onload = function(e){
      document.getElementById("defaultOpen").click();
   }

  $(document).ready(function() {  //If you are using jquery then use this other wise you can use normal window.onload
     document.getElementById("defaultOpen").click();
  });
</script>