body { font-family: Arial, sans-serif; align-items: center; justify-content: center; background:url(images/site/bg-tormentor.jpg); margin: 0; background-color:#272525; } .full-width{ flex-basis: 100%; } /* moro sulle ja hei sun heiluville! */ /* surf naked, hail satian and ding dong! */ /* Barlow font google */ .barlow-thin { font-family: "Barlow", sans-serif; font-weight: 100; font-style: normal;} .barlow-extralight {font-family: "Barlow", sans-serif; font-weight: 200; font-style: normal;} .barlow-light {font-family: "Barlow", sans-serif; font-weight: 300; font-style: normal;} .barlow-regular { font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal;} .barlow-medium {font-family: "Barlow", sans-serif; font-weight: 500; font-style: normal;} .barlow-semibold {font-family: "Barlow", sans-serif; font-weight: 600; font-style: normal;} .barlow-bold {font-family: "Barlow", sans-serif; font-weight: 700; font-style: normal;} .barlow-extrabold {font-family: "Barlow", sans-serif; font-weight: 800; font-style: normal;} .barlow-black { font-family: "Barlow", sans-serif; font-weight: 900; font-style: normal;} .barlow-thin-italic { font-family: "Barlow", sans-serif; font-weight: 100; font-style: italic;} .barlow-extralight-italic {font-family: "Barlow", sans-serif;font-weight: 200;font-style: italic;} .barlow-light-italic { font-family: "Barlow", sans-serif; font-weight: 300; font-style: italic;} .barlow-regular-italic {font-family: "Barlow", sans-serif; font-weight: 400; font-style: italic;} .barlow-medium-italic {font-family: "Barlow", sans-serif; font-weight: 500; font-style: italic;} .barlow-semibold-italic {font-family: "Barlow", sans-serif; font-weight: 600; font-style: italic;} .barlow-bold-italic {font-family: "Barlow", sans-serif; font-weight: 700; font-style: italic;} .barlow-extrabold-italic {font-family: "Barlow", sans-serif; font-weight: 800; font-style: italic;} .barlow-black-italic {font-family: "Barlow", sans-serif; font-weight: 900; font-style: italic;} /* Saira Condensed */ .saira-condensed-thin { font-family: "Saira Condensed", sans-serif; font-weight: 100; font-style: normal;} .saira-condensed-extralight {font-family: "Saira Condensed", sans-serif; font-weight: 200; font-style: normal;} .saira-condensed-light { font-family: "Saira Condensed", sans-serif; font-weight: 300; font-style: normal;} .saira-condensed-regular {font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal;} .saira-condensed-medium {font-family: "Saira Condensed", sans-serif; font-weight: 500; font-style: normal;} .saira-condensed-semibold {font-family: "Saira Condensed", sans-serif; font-weight: 600; font-style: normal;} .saira-condensed-bold { font-family: "Saira Condensed", sans-serif; font-weight: 700; font-style: normal;} .saira-condensed-extrabold { font-family: "Saira Condensed", sans-serif; font-weight: 800; font-style: normal;} .saira-condensed-black {font-family: "Saira Condensed", sans-serif; font-weight: 900; font-style: normal;} /* end font google */ .bgTorme { display:none; position:absolute; top:0px; left:0px; width:2200px; height:978px; background:url(images/site/bg-torme-02-inv.gif) 0px -200px no-repeat; z-index:10; opacity:0.15;} .logo {position:absolute; top:0px; left:0px; width:3300px; height:967px; background:url(images/site/logo-tormentor-dong.png) -80px -50px no-repeat; z-index:5; opacity:0.3;} .logo2 {position:absolute; top:1000px; left:0px; width:3000px; height:967px; background:url(images/site/logo-tormentor-dong.png) -1600px 0px no-repeat; z-index:6; opacity:0.3;} .logo3 {position:absolute; top:2000px; left:0px; width:3000px; height:967px; background:url(images/site/logo-tormentor-dong.png) 1300px 0px no-repeat; z-index:7; opacity:0.3;} .logo4 {position:absolute; top:3000px; left:0px; width:3000px; height:967px; background:url(images/site/logo-tormentor-dong.png) 500px 0px no-repeat; z-index:7; opacity:0.3;} .logo5 {position:absolute; top:4000px; left:0px; width:3000px; height:967px; background:url(images/site/logo-tormentor-dong.png) -1700px 0px no-repeat; z-index:7; opacity:0.3;} .logo6 {position:absolute; top:5000px; left:0px; width:3000px; height:967px; background:url(images/site/logo-tormentor-dong.png) 800px 0px no-repeat; z-index:7; opacity:0.3;} /* pelulamu lauta kuva*/ .break { flex-basis: 100%; height: 0; /* Collapses it visually */} .cent {text-align:center;} .hidden {display:none;} .border {border:1px solid #cc0000;} /* image rotation */ .rot-5 { transform: rotate(-5deg); } .rot-4 { transform: rotate(-4deg); } .rot-3 { transform: rotate(-3deg); } .rot-2 { transform: rotate(-2deg); } .rot-1 { transform: rotate(-1deg); } .rot-0 { transform: rotate(0deg); } .rot1 { transform: rotate(1deg); } .rot2 { transform: rotate(2deg); } .rot3 { transform: rotate(3deg); } .rot4 { transform: rotate(4deg); } .rot5 { transform: rotate(5deg); } /* Tormeblurb top tier - Days Are Numbered... */ .blurpsis1 {position:absolute; top:10px; left:45px; z-index:1600; font-size:6em; color:#f1f1f1; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 8px 8px rgba(0, 0, 0, 0.7);} .blurpsis2 {position:absolute; top:120px; left:130px; z-index:1620; font-size:4.5em; color:#f1f1f1; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 8px 8px rgba(0, 0, 0, 0.7);} .blurpsis3 {position:absolute; top:180px; left:280px; z-index:1640; font-size:6em; color:#f1f1f1; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 8px 8px rgba(0, 0, 0, 0.7);} .blurpsis4 {position:absolute; top:280px; left:450px; z-index:1640; font-size:4.8em; color:#f1f1f1; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 8px 8px rgba(0, 0, 0, 0.7);} /* tormentos logo + raita */ .newTormentorWhite {position:absolute; z-index:520; top:680px; left:330px; width:550px; height:113px;} .newTormentorRed {position:absolute; z-index:510; top:682px; left:337px; width:550px; height:113px;} /* KalenteriTormentos */ .calendar {position:absolute; z-index:520; top:760px; left:400px; width:400px; height:500px;} .calScratch {position:absolute; z-index:510; top:760px; left:400px; width:400px; height:500px; background:url(images/site/card-scratch-01.png) no-repeat;} .calScratch2 {position:absolute; z-index:505; top:760px; left:400px; width:400px; height:500px; background:url(images/site/card-scratch-02.png) no-repeat;} .newCal {position:absolute; z-index:500; top:760px; left:400px; width:400px; height:500px;} /* kalenteritölväys - every day... */ .tormeSlogan {position:absolute; z-index:900; top:540px; left:300px; width:400px; height:400px; } .slogan {color:#f1f1f1 ;font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; padding:0; margin:0; line-height:0.5em; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.9);} .torSlog1 {font-size:3em; position:relative; top:10px; left:-10px; width:302px; height:auto; z-index:910;} .torSlog2 {font-size:3.6em; position:relative; top:25px; left:60px; width:302px; height:auto; z-index:920;} .torSlog3 {font-size:4.2em; position:relative; top:40px; left:100px; width:400px; height:auto; z-index:930;} /* blurb Whoever finds this... - - - - - - - - - - */ .headBlurb {position:absolute; top:160px; left:1300px; z-index:80; width:700px; height:200px; color:#f1f1f1; font-family: "Saira Condensed", sans-serif; font-weight: 300; font-style: normal; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.9);} .bHead1 {font-size:3.1em; line-height:1em; font-weight: 300; font-style: normal; position:absolute; top:0px; left:0px; width:; height:; z-index:;} .bHead2 {font-size:2.6em; line-height:1em; font-weight: 300; font-style: normal; position:absolute; top:35px; left:180px; width:; height:; z-index:;} .bHead3 {font-size:4.4em; line-height:1em; font-weight: 300; font-style: normal; position:absolute; top:55px; left:220px; width:; height:; z-index:;} .bHead4 {font-size:1.6em; line-height:1em; font-weight: 300; font-style: normal; position:absolute; top:130px; left:290px; width:; height:; z-index:;} .bHead5 {font-size:1.2em; line-height:1em; font-weight: 300; font-style: normal; position:absolute; top:150px; left:440px; width:; height:; z-index:;} /* veri jännä important juttu tässä - - - - */ .kontainBlurb {position:absolute; z-index:900; top:300px; left:150px; width:400px; height:400px;} .bLurb {color:#f1f1f1 ;font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; padding:0; margin:0; line-height:0.5em;} .torText1 {font-size:1.6em; position:relative; top:20px; left:-6px; width:302px; height:auto; z-index:910;} .torText2 {font-size:2.2em; position:relative; top:35px; left:10px; width:302px; height:auto; z-index:920;} .torText3 {font-size:2.8em; position:relative; top:40px; left:20px; width:302px; height:auto; z-index:930;} .torText4 {font-size:3.6em; position:relative; top:70px; left:20px; width:302px; height:auto; z-index:940;} .torText5 {position:absolute; top:103px; left:-5px; width:350px; height:79; z-index:940;} .torTextRed {position:absolute; top:103px; left:-1px; width:350px; height:79; z-index:935;} /* kalenteri controls - - - - - - - - - - - */ .containKale {position:absolute; z-index:500; top:830px; left:435px; width:450px; height:500px; display:none;} .controls { position:absolute; bottom:20px; left:0px; width:400px; height:50px;margin: 20px 0;} select, button { padding: 10px; font-size: 16px; margin: 0 8px; } #monthSelect, #daySelect {background:#000000; color:#ffffff;} .controls button { cursor: pointer;background: #000000;color: white;border: none;border-radius: 4px;} .controls button:hover {background: #808080;} /* kalenterikuva */ .tDay {position:absolute; top:20px; left:20px; width:302px; height:353px; z-index:500;} .dayText {position:relative; top:-80px; left:0px; z-index:500; width:300px; height:90px; color:#f1f1f1; font-size:1.3em; line-height:1.35em; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal;} .dateSelection {position:relative; top:900px; left:1000px; width:302px; height:300px; z-index:150; color:#f1f1f1; font-size:1.3em; line-height:1.35em; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal;} /* - - - - - - - - - - - - - - - - - - */ /* traktaarit elikkä jumaleissönin sanat */ .kuntainer {position:absolute; top:1400px; left:150px; width:1000px; height:2000px; z-index:100;} /* höpsöttelykortti */ .tCard {position:relative; top:0px; left:0px; width:930px; height:892px; z-index:90; display:flex; justify-content:center; align-items:center;} .tCard img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; /*border-style: dotted; border-color:#8c8c8c;*/ box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.65);} /* höpsöttelyn taustaläjä */ .bgPile {position:absolute; z-index:40; top:0px; left:0px; width:930px; height:892px; background:url(images/site/bg-pile-card-01-2.png) no-repeat; opacity:0.4;} .pickCard {position:absolute; top:900px; left:1400px; width:800px; height:100px; z-index:100; color:#f1f1f1; font-size:1.3em; line-height:1.35em; font-family: "Saira Condensed", sans-serif; font-weight: 400; font-style: normal; } /* end hömppä-herra-kortti */ /* tormentors lokot */ .bgTormentors {position:absolute; z-index:50; top:990px; left:0px; width:930px; height:892px; background:url(images/site/bg-pile-tormentors-2.png) no-repeat; opacity:0.75;} .tormentors {position:absolute; z-index:90; top:990px; left:0px; width:930px; height:892px; display:flex; justify-content:center; align-items:center; } .tormentors img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; /*border-style: dotted; border-color:#8c8c8c;*/box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.65);} /* noppula */ .noppelis {position:relative; z-index:777; top:2200px; left:150px;width:200px; height:200px;} .bGnoppelis {position:relative; z-index:776; top:2000px; left:125px;width:262px; height:259px;} .image-button { background: none; border: none; padding: 0; cursor: pointer; outline: none;} .image-button:focus { outline: none;/*2px solid #007bff;*/ outline-offset: 2px;} .image-button img {display: block; } .rotateRight { -webkit-animation:spin 0.6s linear infinite; -moz-animation:spin 0.6s linear infinite; animation:spin 0.6s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* end noppula */ /* box content text */ .infoLogo {position:absolute; z-index:210; top:3350px; left:590px; width:350px; height:79px;} .guiltyAsCharged {position:absolute; z-index:300; top:3430px; left:490px; width:600px; height:500px; color:#f1f1f1;} .guiltyAsCharged p {font-size:1.2em; line-height:1.45em; font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; text-align:center;} .konversion {font-size:0.7em; line-height:1em; color:#999999;} /* logo isten fanzine */ .istenFanzine {position:absolute; z-index:250; top:3300px; left:100px; width:333px; height:326px; background:url(images/site/logo-isten-fanzine-w.png);} .istenFanzineBg {position:absolute; z-index:248; top:3305px; left:102px; width:333px; height:326px; background:url(images/site/logo-isten-fanzine-b.png); opacity:0.5;} .infoTorme {position:absolute; z-index:260; top:3700px; left:500px; width:680px; height:600px; color:#f1f1f1; font-size:1.2em; line-height:1.45em; font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 3px 4px rgba(0, 0, 0, 0.9);} .soldOut {font-size:1.8em;} .boxBorder {border:0px dashed #f1f1f1;} .boxPhoto1 { display:none; position:absolute; z-index:260; top:5800px; left:50px; width:500px; height:500px; background:url(images/site/kuva-tuote-01.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .boxPhoto2 { position:absolute; z-index:262; top:5420px; left:740px; width:450px; height:600px; background:url(images/site/kuva-tuote-02.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .boxPhoto3 { display:none; position:absolute; z-index:264; top:4400px; left:120px; width:500px; height:500px; background:url(images/site/kuva-tuote-03.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .boxPhoto4 { display:none; position:absolute; z-index:266; top:4550px; left:690px; width:500px; height:500px; background:url(images/site/kuva-tuote-04.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .boxPhoto5 { display:none; position:absolute; z-index:268; top:4950px; left:100px; width:450px; height:600px; background:url(images/site/kuva-tuote-05.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} /*uudet votot */ .photoTorme1 {position:absolute; z-index:200; top:3800px; left:50px; width:550px; height:499px; background:url(images/site/torme-01.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .photoTorme3 {position:absolute; z-index:204; top:3750px; left:650px; width:488px; height:650px; background:url(images/site/torme-03.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .photoTorme4 {position:absolute; z-index:206; top:4350px; left:-10px; width:600px; height:450px; background:url(images/site/torme-04.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .photoTorme5 {position:absolute; z-index:208; top:4450px; left:640px; width:600px; height:450px; background:url(images/site/torme-05.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .photoTorme6 {position:absolute; z-index:210; top:4880px; left:60px; width:600px; height:450px; background:url(images/site/torme-06.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .photoTorme7 {position:absolute; z-index:212; top:5020px; left:660px; width:600px; height:450px; background:url(images/site/torme-07.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .photoTorme8 {position:absolute; z-index:214; top:5370px; left:90px; width:600px; height:456px; background:url(images/site/torme-08.jpg) no-repeat; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} /* end box photo content */ .bottomBlock {position:absolute; top:6100px; left:0px; height:50px; width:50px; z-index:2;} /* text Kuronen*/ .containerText {position:absolute; top:360px; left:1300px; width:750px; height:auto; z-index:1000; color:#f1f1f1; font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; } .containerText h3, .archives h3 {font-size:2em; font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);} .containerText p {font-size:1.2em; line-height:1.45em; font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal;} .curs {font-style: italic; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);} .imps {text-align:center; padding:0 5em 0 0; margin:0;} /* past issues */ .archives {position:absolute; z-index:100; top:360px; left:2200px; width:900px; margin-right:3em; height:auto; color:#f1f1f1; /*font-size:1.2em; line-height:1.45em; font-family: "Barlow", sans-serif; font-weight: 400; font-style: normal;*/} .nik { display:inline-block; margin:0 40px 40px 0; box-shadow: 0 10px 10px rgba(0,0,0,0.5);} .zineChurches { width:225px; height:222px; background:url(images/site/zines-05.png) -820px -9px no-repeat;} .zineGhost { width:225px; height:318px; background:url(images/site/zines-05.png) -550px -9px no-repeat;} .zineDeath { width:225px; height:318px; background:url(images/site/zines-05.png) -280px -9px no-repeat;} .zineSkull {width:225px; height:318px; background:url(images/site/zines-05.png) -10px -9px no-repeat;} .zineHorned {width:225px; height:318px; background:url(images/site/zines-04.png) -1360px -9px no-repeat;} .zineGun {width:225px; height:318px; background:url(images/site/zines-04.png) -1090px -9px no-repeat;} .zineNifel {width:225px; height:318px; background:url(images/site/zines-04.png) -820px -9px no-repeat;} .zine100 {width:225px; height:318px; background:url(images/site/zines-04.png) -550px -9px no-repeat;} .zineTwinSister {width:225px; height:318px; background:url(images/site/zines-04.png) -280px -9px no-repeat;} .zineMadchen {width:225px; height:318px; background:url(images/site/zines-04.png) -10px -9px no-repeat;} .zineColdLake {width:225px; height:318px; background:url(images/site/zines-03.png) -1360px -9px no-repeat;} .zineDorkLord {width:225px; height:318px; background:url(images/site/zines-03.png) -1090px -9px no-repeat;} .zine7B {width:225px; height:318px; background:url(images/site/zines-03.png) -820px -9px no-repeat;} .zine7 {width:225px; height:318px; background:url(images/site/zines-03.png) -550px -9px no-repeat;} .zineSix { width:225px; height:318px; background:url(images/site/zines-03.png) -280px -9px no-repeat;} .zineHarppu {width:225px; height:318px; background:url(images/site/zines-03.png) -10px -9px no-repeat;} .zineFive {width:225px; height:318px; background:url(images/site/zines-02.png) -1090px -9px no-repeat;} .zineFour {width:225px; height:318px; background:url(images/site/zines-02.png) -820px -9px no-repeat;} .zineThree {width:225px; height:318px; background:url(images/site/zines-02.png) -550px -9px no-repeat} .zineTwo {width:225px; height:318px; background:url(images/site/zines-02.png) -280px -9px no-repeat} .zineOne {width:225px; height:318px; background:url(images/site/zines-02.png) -10px -9px no-repeat} .zineDemo5 {width:225px; height:318px; background:url(images/site/zines-01.png) -1090px -9px no-repeat} .zineDemo4 { width:225px; height:318px; background:url(images/site/zines-01.png) -820px -9px no-repeat;} .zineDemo3 {width:225px; height:318px; background:url(images/site/zines-01.png) -550px -9px no-repeat;} .zineDemo2 {width:225px; height:318px; background:url(images/site/zines-01.png) -280px -9px no-repeat;} .zineDemo1 {width:225px; height:318px; background:url(images/site/zines-01.png) -10px -9px no-repeat;} /* end past issues */ /* flex text */ .--containerText { position:absolute; top:3000px; left:100px; z-index:10; width: 3000px; /* or whatever wide value you want */ margin: 0 auto; padding: 20px; /* Flex container */ display: flex; flex-direction: row; /* default - items go left → right */ flex-wrap: wrap; /* allows new rows when space runs out */ gap: 30px; /* space between paragraphs */ align-items: flex-start; /* align tops of paragraphs */ } .--paraKuro { /* Give each paragraph a reasonable width */ flex: 0 1 800px; /* grow:0, shrink:1, basis:350px */ /* or use: width: 350px; max-width: 400px; */ background: #f8f9fa; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .ohje { flex-basis: 100%; height:40px; background:#000000; color:#f1f1f1; padding:1em;} .Torme1,.Torme2 {display:flex; flex-direction:column; align-items:center; width:300px; height:300px; } .hisstory {position:absolute; z-index:100; top:3000px; left:900px; width:1000px; height:2700px; border:1px solid #f1f1f1;} .hisstory p {padding:1em; color:#f1f1f1;font-size:1.6em; line-height:1.6em;}